window.onload = function(){
    var obj = {

    }
    //绑定事件函数
    function initEvent(){
    //点击 不同标题 显示不同内容
    var titleList = document.getElementsByClassName('title');
    var contentList = document.getElementsByClassName('content');

    for(let i=0;i < titleList.length; i++){
        titleList[i].onclick = function(){//为第i个标题绑定点击事件
            //当 第i个标题被电击后，要做些什么?
            //只显示第i个内容,只为第i个标题加边框
            
            //为第i个内容添加active类别
            contentList[i].classList.add('active');
            titleList[i].classList.add('active');
            //删除其他的active类别
            for(let j=0;j<contentList.length;j++){
                if(j !=i){//不是当前内容
                contentList[j].classList.remove('active');
                titleList[j].classList.remove('active');
                }
            }
        }
    }   
}
    initEvent();
    //获取按钮对象,绑定添加点击事件,实现添加元素节点功能
    var btnAdd = document.getElementById('add');
    btnAdd.onclick = function(){
        //创建一个li节点
        let li = document.createElement('li');
        //添加节点到ul中
        let text = document.createTextNode('标题4');
        li.appendChild(text);
        //添加属性节点
        let clazz = document.createAttribute('class');
        clazz.value = 'title';
        li.setAttributeNode(clazz);

        let ul = document.getElementsByClassName('titles')[0];
        ul.appendChild(li);

        let cli = document.createElement('li');
        
        let ctext = document.createTextNode('内容4');
        cli.appendChild(ctext);
        
        let cclazz = document.createAttribute('class');
        clazz.value='content';
        cli.setAttributeNode(cclazz);

        let cul = document.getElementsByClassName('contents')[0];
        cul.appendChild(cli);

        initEvent();
    }
} 
